<template>
  <!-- 档案标签更换 -->
  <div>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="queryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item label="RFID">
          <el-input v-model="queryParam.rfid" placeholder="请输入RFID" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-tooltip content="RFID实体标签更换，RFID号不变" placement="top" effect="light">
            <el-button type="primary" @click="handleReplace">批量更换标签</el-button>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-tooltip content="RFID实体标签更换，RFID号重新注册" placement="top" effect="light">
            <el-button type="primary" @click="batchRegister">批量注册标签</el-button>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-tooltip content="RFID号取消绑定:将RFID号在系统中去除" placement="top" effect="light">
            <el-button type="primary" @click="unbindRfid">取消绑定标签</el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <el-row :gutter="24">
        <el-col :span="24"> </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-table :data="tableData" ref="table" border style="width: 100%" height="50vh"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" sortable> </el-table-column>
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
          :width="item.width" :show-overflow-tooltip="true">
          <template #default="scope">
            <span v-if="item.prop === 'boxNo'">
              <el-link v-if="scope.row.boxNo" type="primary" :underline="false" style="font-size: 12px"
                @click="archivesByBoxNo(scope.row)">
                {{ scope.row[item.prop] }}
              </el-link>
              <span v-else>无</span>
            </span>
            <span v-else-if="item.prop === 'stageStatus'">
              <el-tag v-if="scope.row.stageStatus == 0">未上架</el-tag>
              <el-tag v-if="scope.row.stageStatus == 1" type="success">已上架</el-tag>
              <el-tag v-if="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
            </span>
            <span v-else-if="item.prop === 'storeStatus'">
              <el-tag :type="statusInfo(scope.row).type">
                {{ statusInfo(scope.row).text }}
              </el-tag>
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination"></pagination>
    </el-card>
    <label-batch-replace-dialog ref="labelBatchReplaceDialog" @ok="loadData"
      :field="field"></label-batch-replace-dialog>
    <archives-by-box-no ref="archivesByBoxNo"></archives-by-box-no>
  </div>
</template>

<script>
import { archivesLabelReplacePage, unbindRfid } from '@/api/rfid/label'
import labelBatchReplaceDialog from './dialog/labelBatchReplaceDialog.vue'
import archivesByBoxNo from '../rfid/dialog/archivesByBoxNo.vue'
import { queryArchiveTemp } from '@/api/sys/template'

export default {
  name: 'archiveLabelReplace',
  components: { labelBatchReplaceDialog, archivesByBoxNo },
  data() {
    return {
      totalCount: 0, //总数
      //查询条件
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      queryParam: {
        labelType: 0,
      },
      tableData: [],
      tableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: '盒号', prop: 'boxNo', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '上架状态', prop: 'stageStatus', width: '', checked: true },
        { title: '在库状态', prop: 'storeStatus', width: '', checked: true },
        { title: '存放位置', prop: 'positionId_dictText', width: '', checked: true },
      ],
      selectionData: [],
      field: null,
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    statusInfo(row) {
      if (row.storeStatus === 0) return { type: '', text: '未入库' }
      if (row.storeStatus === 1) {
        return row.stageStatus === 1
          ? { type: 'success', text: '在库' }
          : { type: 'warning', text: '暂存' }
      }
      if (row.storeStatus === 2) return { type: 'danger', text: '离库' }
      return { type: '', text: '' }
    },
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    reset() {
      this.queryParam = {}
      this.$refs.pagination.resetPagination()
    },
    handleReplace() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要更换标签的档案')
        return
      }
      // 选择的档案rfid不为为空
      if (this.selectionData.some((item) => item.rfid === null || item.rfid === '')) {
        this.$message.warning('存在未注册rfid的档案')
        return
      }
      this.$refs.labelBatchReplaceDialog.add(this.selectionData, 'replace', 'archive')
      this.getTemplateTableProps()
    },
    batchRegister() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要重新注册的档案')
        return
      }
      this.$refs.labelBatchReplaceDialog.add(this.selectionData, 'register', 'archive')
      this.getTemplateTableProps()
    },
    // 取消绑定
    unbindRfid() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要取消绑定标签的档案')
        return
      }
      // 选择的档案盒rfid不为为空
      if (this.selectionData.some((item) => item.rfid === null || item.rfid === '')) {
        this.$message.warning('存在未注册rfid的档案')
        return
      }
      this.$confirm('此操作将会在系统中去除当前的RFID号，请谨慎操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let labelIds = this.selectionData.map((item) => item.labelId)
          unbindRfid(labelIds).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('取消绑定成功')
              this.loadData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        })
        .catch((error) => {
          if (error !== 'cancel') {
            // 其他错误情况，例如网络错误等
            this.$message.error(error)
          }
        })
    },
    // 获取模版需要打印的字段
    getTemplateTableProps() {
      queryArchiveTemp().then((res) => {
        if (res.data.code == 200) {
          this.field = res.data.data
        }
      })
    },
    handleSelectionChange(val) {
      this.selectionData = val
    },
    loadData() {
      const param = Object.assign(this.queryParam, this.searchModel)
      archivesLabelReplacePage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records
            this.totalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.loadData()
    },
    archivesByBoxNo(row) {
      this.$refs.archivesByBoxNo.init(row)
    },
  },
}
</script>

<style scoped lang="less">
.demo-form-inline {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
